

import { Card, Flex, Form, Input } from "@/components/base";
import { Typography } from "@/components/typography";
import * as hooks from '../../hooks';

const { Text } = Typography;

export function BasicInfoForm() {
    const { isEdit } = hooks.useSearch();

    return (
        <Card>
            <Text size={16} strong style={{ display: 'block', marginBottom: '16px' }}>
                基本信息
            </Text>

            <Form.Item
                label="卡号"
                name="cardNumber"
                style={{ width: '100%', padding: 0 }}
                rules={[
                    { required: true, message: '请输入卡号' },
                    { 
                        pattern: /^[A-Za-z0-9]{8,}$/, 
                        message: '卡号必须是8位数字或字母及以上' 
                    }
                ]}
            >
                <Input placeholder="请输入卡号" disabled={isEdit} />
            </Form.Item>

            {/* 卡片名称 */}
            <Form.Item
                label="卡片名称"
                name="cardName"
                style={{ width: '100%', padding: 0 }}
                rules={[{ required: true, message: '请输入卡片名称' }]}
            >
                <Input placeholder="请输入卡片名称" disabled={isEdit} />
            </Form.Item>

            <Flex vertical >
                <Form.Item
                    label="充值金额"
                    name="rechargeAmount"
                    style={{ width: '100%', padding: 0 }}
                    getValueProps={(value) => {
                        return {
                            value: (value || value === 0) ? `${value}` : undefined,
                        };
                    }}
                    getValueFromEvent={(value) => {
                        return value ? parseFloat(value) : undefined;
                    }}
                    rules={[
                        { required: true, message: '请输入充值金额' },
                        {
                            validator: (_, value) => {
                                if (value && value <= 0) {
                                    return Promise.reject(new Error('充值金额必须大于0'));
                                }
                                return Promise.resolve();
                            }
                        }
                    ]}
                >
                    <Input type="number" placeholder="请输入充值金额" step="0.01" />
                </Form.Item>

                <Form.Item
                    label="赠送金额"
                    name="giftAmount"
                    style={{ width: '100%', padding: 0 }}
                    getValueProps={(value) => {
                        return {
                            value: (value || value === 0) ? `${value}` : undefined,
                        };
                    }}
                    getValueFromEvent={(value) => {
                        return value ? parseFloat(value) : undefined;
                    }}
                >
                    <Input type="number" placeholder="请输入赠送金额" step="0.01" />
                </Form.Item>

                <Form.Item
                    label="赠送积分"
                    name="giftPoints"
                    style={{ width: '100%', padding: 0 }}
                    getValueProps={(value) => {
                        return {
                            value: (value || value === 0) ? `${value}` : undefined,
                        };
                    }}
                    getValueFromEvent={(value) => {
                        return value ? parseFloat(value) : undefined;
                    }}
                >
                    <Input type="number" placeholder="请输入赠送积分" step="0.01" />
                </Form.Item>
            </Flex>
        </Card>
    );
} 